<template>
    <div id="receiveGifts">
        <yd-cell-group>
            <div class="goodsInfo_li" v-if="orderGoodsList && orderGoodsList.length>0" @click="showDetail">
                <div class="goodsInfo_img">
                    <img v-if="orderGoodsList.length == 1" :src='imgUrl+orderGoodsList[0].goodsImage'>
                    <img v-else src="../../assets/giftBox.png">
                </div>
                <div class="goodsInfo_list">
                    <div class="goodsInfo_title">关爱礼盒</div>
                    <br>
                    <div class="goodsInfo_title">
                        {{orderGoodsList[0].goodsName}}
                        <span v-if="orderGoodsList.length>1">、{{orderGoodsList[1].goodsName}}</span>
                        <span v-if="orderGoodsList.length>2"> ......</span>
                    </div>
                </div>
            </div>
            <div class="goodsInfo_li" v-else>
                <div class="goodsInfo_img">
                    <img src="../../assets/giftBox.png">
                </div>
                <div class="goodsInfo_list">
                    <div class="goodsInfo_title" style="color:red">该礼品已被领取</div>
                </div>
            </div>
        </yd-cell-group>
        <yd-cell-group v-show="showInfo == '1'">
            <div class="goodsInfo_li" v-for="(item,index) in orderGoodsList" :key='index'>
                <div class="goodsInfo_img">
                    <img :src='imgUrl+item.goodsImage'>
                </div>
                <div class="goodsInfo_list">
                    <div class="goodsInfo_title">{{item.goodsName}} </div>
                    <br>
                    <div class="goodsInfo_conter">规格：{{item.goodsSpec | oGoodsSpec}} 
                        <span style="color:red;float:right;margin-right:15px"> X {{item.goodsNum}}</span>
                    </div>
                </div>
            </div>
        </yd-cell-group>
        <div>
            <yd-icon name="warn-outline" size=".5rem" color="#FF685D"></yd-icon>&nbsp;&nbsp;请输入你的地址领取礼品
        </div>
        <yd-cell-group style="margin-bottom:0">
            <yd-cell-item>
                <span slot="left">收货人姓名：</span>
                <yd-input slot="right" required :show-required-icon='false' v-model="trueName" ref="nameName" placeholder="请输入姓名"></yd-input>
            </yd-cell-item>
            <yd-cell-item>
                <span slot="left">收货人手机号：</span>
                <yd-input slot="right" required :show-required-icon='false' v-model="mobPhone" ref="phoneName" regex="mobile" placeholder="请输入手机号码"></yd-input>
            </yd-cell-item>
            <yd-cell-item>
                <span slot="left">收货地址</span>
            </yd-cell-item>
            <yd-cell-item>
                <span slot="left">&nbsp;&nbsp;&nbsp;&nbsp;所在区域：</span>
                <yd-input slot="right" @click.native="show = true" required :show-required-icon='false' v-model="regionAc" readonly ref="regioneName" placeholder="请选择"></yd-input>
            </yd-cell-item>
            <yd-cell-item>
                <span slot="left">&nbsp;&nbsp;&nbsp;&nbsp;详细地址：</span>
                <yd-input slot="right" required :show-required-icon='false' v-model="address" ref="addresseName" placeholder="请输入收货人详细地址"></yd-input>
            </yd-cell-item>
        </yd-cell-group>
        <div class="dangerBtn">
            <yd-button size="large" style="margin-top:0.3rem" :disabled='isDisabled' @click.native="dangerBtn" type="danger">
                <span v-if="!isDisabled">提交信息</span>
                <span v-else>已领取</span>
            </yd-button>
            <!-- <yd-button size="large" @click.native="Scan" type="danger">扫一扫</yd-button> -->
        </div>
        <yd-cityselect v-model="show" :ready='isReady' ref="cityselectDemo" :callback="result" :items="district" :provance="regionText" :city="cityText" :area="areaText"></yd-cityselect>
    </div>
</template>
<script>
import District from '@/../static/city'

export default {
    name: 'receiveGifts',
    data() {
        return {
            cartChannelLength: 0,
            isReady: false,
            imgUrl: this.CONSTANT.imgBaseUrl,
            show: false,
            isDisabled: true,
            giftCode: '无',
            district: [],
            orderGoodsList: [],
            regionAc: "",
            trueName: "",  //#####必填
            regionId: '1',  // #####必填
            areaId: '',
            cityId: '',     //#####必填
            regionText: '北京',  // #####必填
            cityText: '',     //#####必填
            areaText: '',
            areaInfo: "",
            address: "",   //#####必填
            telPhone: "",
            addressId: 0,   // addressId: 0
            areaInfoText: '暂无',            
            mobPhone: "",   //#####必填
            isDefault: '0',  //###### 1默认收货地址 0非默认
            showInfo: '0',  //###### 1显示详情 0不显示
        }
    },
    filters: {
        oGoodsSpec(goodsSpec) {
            if (goodsSpec == 'N;') {
                return "默认";
            }
            return goodsSpec;
        }
    },
    created: function() {
        this.giftsCode(this.$store.state.giftCode);
        this.mobPhone = this.$route.query.mobPhone;
        this.district = District;
        this.isReady = true;
    },
    mounted: function() {
        this.$store.commit('scan', '');
    },
    methods: {
        result(ret) {
            this.regionId = ret.itemValue1.toString();
            this.cityId = ret.itemValue2.toString();
            this.areaId = ret.itemValue3.toString();
            this.regionAc = ret.itemName1 + ret.itemName2 + ret.itemName3;
        },
        showDetail() {
            if (this.showInfo == "0") {
                this.showInfo = "1";
            } else {
                this.showInfo = "0";
            }
        },
        dangerBtn() {
            if (this.isDisabled) {
                return false;
            }
            let nameName = this.$refs.nameName;
            if (!nameName.valid) {
                this.$dialog.toast({
                    mes: '姓名不可为空',
                    timeout: 1000
                });
                return false;
            }
            let phoneName = this.$refs.phoneName;
            if (!phoneName.valid) {
                let toastMsg = phoneName.errorMsg;
                // errorCode => NOT_NULL(不能为空)、NOT_MIN_SIZE(输入字符位数不足)、NOT_REGEX_RULE(不符合规则)
                if (phoneName.errorCode == "NOT_NULL") {
                    toastMsg = "手机号"+toastMsg;
                } else {
                    toastMsg = "请输入正确的手机号";
                }
                this.$dialog.toast({
                    mes: toastMsg,
                    timeout: 1000
                });
                return false;
            }
            if (this.regionAc == '') {
                this.$dialog.toast({
                    mes: '收货地址的区域不可为空',
                    timeout: 1000
                });
                return false;
            }
            if (this.address == '') {
                this.$dialog.toast({
                    mes: '详细地址不可为空',
                    timeout: 1000
                });
                return false;
            }

            this.$dialog.confirm({
                title: '确认',
                mes: '请确认以上所填信息是否正确。确定要提交？',
                opts: [
                    {
                        txt: '取消',
                        color: false,
                        callback: () => {
                            // 什么也不处理
                        }
                    },
                    {
                        txt: '确定',
                        color: true,
                        callback: () => {
                            let msg = {
                                // addressId: this.addressId,
                                trueName: this.trueName,
                                regionId: Number(this.regionId),  //省份
                                cityId: Number(this.cityId),      //市
                                areaId: Number(this.areaId),      //县
                                address: this.address,
                                // telPhone: this.telPhone,
                                mobPhone: this.mobPhone,
                                isDefault: this.isDefault,
                                giftCode: this.giftCode
                            }
                            this.$dialog.loading.open('正在保存');
                            this.$httpAjax.post(this.CONSTANT.wapiBaseUrl + 'gift/receiveGift', msg)
                                .then((response) => {
                                    this.$dialog.loading.close();
                                    if (response.status == 200) {
                                        if (response.data.status == 1) {
                                            this.isDisabled = true;
                                            // ajaxReturnData.setResult(true)
                                            if (response.data.object.result) {
                                                this.$dialog.toast({
                                                    mes: '领取成功',
                                                    timeout: 1000
                                                });
                                                this.$router.push('/order?pageFlg=receiveGifts');
                                            } else {
                                                this.$dialog.toast({
                                                    mes: response.data.object.message,
                                                    timeout: 1500
                                                });
                                                // 重新取得页面数据
                                                setTimeout(() => {                                                    
                                                    this.giftsCode(this.$store.state.giftCode);
                                                }, 1505);
                                            }
                                        }
                                    }
                                }).catch((error) => {
                                    this.$dialog.loading.close();
                                });
                        }
                    }
                ]
            });
        },
        giftsCode(result) {
            this.$dialog.loading.open('请稍后');
            this.$axios.get(this.CONSTANT.wapiBaseUrl + 'gift/checkGiftCode?giftCode=' + result)
                .then((response) => {
                    this.$dialog.loading.close();
                    if (response.status == 200) {
                        if (response.data.status == 1) {
                            this.isDisabled = false;
                            this.giftCode = result;
                            this.orderGoodsList = response.data.object;
                            for (var i = 0; i < response.data.object.length; i++) {
                                this.cartChannelLength += response.data.object[i].goodsNum;
                            }
                        }
                    }
                }).catch((error) => {
                    this.$dialog.loading.close();
                });
        }
    }
}
</script>
<style  scoped>
.dangerBtn {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.25rem;
    height: auto;
    overflow: hidden;
}
.order_center {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.2rem;
    padding-right: 1.2rem;
    height: 1.8rem;
    line-height: 1.8rem;
    overflow: hidden;
    font-size: 14px;
    background: #f5f5f5;
    color: #4a4a4a;
    position: relative;
}

.order_right {
    position: absolute;
    right: 0.4rem;
    height: 20px;
    line-height: 20px;
    margin-top: -10px;
    top: 50%;
}

.order_center .order_center_left {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 5px;
    float: left;
}

.order_center .order_center_left img {
    width: 1.5rem;
    float: left;
    min-height: 100%;
}

.order_center_right {
    width: auto;
    height: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
    padding: 0 0.15rem;
    font-size: 14px;
}

.goodsInfo_li {
    width: 100%;
    height: 2rem;
    padding-top: 5px;
    padding-bottom: 5px;
    overflow: hidden;
    border-bottom: 1px solid #BBBBBB;
}

.goodsInfo_li:last-of-type {
    border-bottom: 0;
}

.goodsInfo_li .goodsInfo_img {
    float: left;
    padding-left: 0.2rem;
    width: 1.8rem;
    height: 100%;
    overflow: hidden;
}

.goodsInfo_img img {
    width: 100%;
    height: auto;
    min-height: 100%;
}

.goodsInfo_list {
    /* float: left; */
    /* width: calc(100% - 2.5rem); */
    padding-left: 0.2rem;
    height: 100%;
    box-sizing: border-box;
    padding-top: 0.3rem;
    overflow: hidden;
}

.goodsInfo_list .goodsInfo_title {
    color: #333;
    font-size: 16px;
    overflow: hidden;
    height: 0.4rem;
    line-height: 0.4rem;
}
</style>
<style>
#receiveGifts .orderlist_top .yd-cell-box {
    margin-bottom: 0px!important;
}

#receiveGifts .areaInfo {
    white-space: pre-line;
    padding: 15px 0;
}
</style>